<script lang="ts" setup>
import { useI18n } from 'vue-i18n'

import { useClassTable } from './composables/useClassTable'
import CreateClassButton from './CreateClassButton.vue'
import enUS from './locales/en-US.json'
import zhCN from './locales/zh-CN.json'
import { defineMessage } from '@/locales'
import { tableProps } from '@/constants/component-props'

import type { ClassModel } from '@/apis/class'
import type { TableSlotCell } from '@/types/components-tool'

useI18n<[typeof import('./locales/zh-CN.json')], Locales>({
  useScope: 'local',
  messages: defineMessage(enUS, zhCN)
})

const { columns, classes, gotoClassDetail } = useClassTable()
</script>

<template>
  <div class="bg-arco-2 pb-xs mb-xs rounded">
    <header class="flex justify-between pa-xs">
      <h3 class="card-title"><i class="i-fluent-group-24-filled text-lg" />班级列表</h3>
      <CreateClassButton />
    </header>
    <a-table
      v-bind="tableProps"
      row-key="username"
      row-class="hover:cursor-pointer"
      :data="classes"
      :columns
      @row-click="gotoClassDetail"
    >
      <template #th><th class="arco-table-thead" /></template>
      <template #teacher="{ record: { teacher } }: TableSlotCell<ClassModel>">
        <span>
          <a-tag color="blue" size="small">{{ teacher.username }}</a-tag> {{ teacher.name }}
        </span>
      </template>
      <template #description="{ record: { description } }: TableSlotCell<ClassModel>">
        <a-typography-paragraph
          type="secondary"
          class="my-1!"
          :ellipsis="{ rows: 1, expandable: true }"
        >
          {{ description }}
        </a-typography-paragraph>
      </template>
      <template #action>
        <a-button-group size="mini" type="dashed">
          <a-button class="px-2!" status="success">
            <i class="i-fluent-edit-person-24-filled" />
          </a-button>
          <a-button class="px-2!" status="danger">
            <i class="i-fluent-delete-12-regular" />
          </a-button>
        </a-button-group>
      </template>
    </a-table>
  </div>
</template>
